<template>
	<view class="app-live-broadcast e-p-20" :style="[AppSkinVar]">
		<view class="app-live-broadcast__item e-flex e-flex-items-start e-p-20 bg-white" v-for="(item,index) in list"
			:key="index"
			@tap="$goTo(`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${item.roomid}`)">
			<view class="e-m-r-30">
				<load-image mode="aspectFit" :size="['144rpx']"    :src="item.coverImg">
				</load-image>
			</view>
			<view class="e-flex-1">
				<view class="e-m-b-12">
					<text class="fw-600 e-line-2">{{item.name}}</text>
				</view>
				<view>
					<text class="e-font-24 c-regular">{{item.anchorName}}</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		getLiveinfoList
	} from '@/common/request/api'
	import { useQueryPage } from '@/common/hooks'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'

	const {
		list,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: getLiveinfoList
	})

	handleRefresh()

	onReachBottom(() => {
		handleQueryPage()
	})
</script>

<style>
	page {
		background: #F7F7F7;
	}
</style>

<style lang="scss" scoped>
	@include appBem_b(live-broadcast) {
		@include appBem_e(item) {
			

		}
	}
</style>